<template>
	<view>
		<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/shangdou-bg1@2x.png" mode="widthFix"
			class="property-bg"></image>

		<uni-nav-bar title="熵豆交易和兑换" left-icon="back" @clickLeft="$tab.back()" :statusBar="true" :fixed="true"
			:border="false" :backgroundColor="navBg" color="#FFF"></uni-nav-bar>


		<view class="content px-20 mt-32 pt-16">
<!-- 			<div class="text-FFF">
				防恶意囤豆交易规则：
				<div class="">
					一、每个账号可将认购资产包时使用过的熵豆总额的50%作为额外囤积熵豆的额度，多次认购资产包可增加囤积额度。
				</div>
				<div class="">
					二、超过50%多囤积的熵豆部分（不含奖励熵豆），系统当日23:59按购买时原价挂卖至出售区。
				</div>
				<div class="">
					三、认购资产包获得使用熵豆金额的50%囤豆额度，长期有效，如有卖出可随时囤满。
				</div>
				<div class="">
					四、未按规定被挂至交易区熵豆售出8%手续费自行承担。
				</div>
			</div> -->
			
			<div class="shangdouduihuan">
				<div class="px-16 flex items-center justify-between text-FFF round-8" style="background: rgba(126, 0, 0, 0.2);height: 64rpx;">
					<div class="font-500">
						我的可兑换熵豆
					</div>	
					<div class="text-40 font-500">{{goldValue}}</div>
				</div>
				<div class="mt-24" style="height: 2rpx;background: rgba(216, 216, 216, .4);">
					
				</div>
				
				<div class="mt-32 flex align-center justify-between" v-if="prodList.length > 0">
					<image :src="globalConfig.imagePrefix + item.cover" mode=""
						style="width: 260rpx;height: 260rpx;border-radius: 12rpx;" v-for="(item,index) in prodList"
						:key="item.id" @click="goShopDetal(item)"></image>
				
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_gengduo@2x.png"
						style="width: 86rpx;height: 260rpx;" mode=""
						@click="$tab.nav(`/pages/commodity/list?columnType=6`)"></image>
				</div>
			</div>

			<view class="transaction mt-32 py-36">
				<view class="px-20">
					<view class="flex items-center justify-between">
						<view class="text-32 font-700" style="color: #FF561D;width: 33%;" @click="handleBuy">
							我要买/卖豆
						</view>
						<view class="text-36 font-700 text-FFF">
							转让大厅
						</view>
						<view class="text-32 font-700 text-right" style="color: #FF561D;width: 33%;"
							@click="$tab.nav(`/pages/index/shangdoujiaoyi/order`)">
							我的订单
						</view>
					</view>
				</view>

				<view class="px-28">
					<div class="flex flex-col align-center mt-32">
						<u-tabs :list="tabList1" :current="tabIndex1" lineWidth="30" lineColor="#FE6835" :activeStyle="{
						            color: '#FE6835',
						            fontWeight: 'bold',
						            transform: 'scale(1.05)',
									fontSize:'40rpx'
						        }" :inactiveStyle="{
						            color: '#606266',
						            transform: 'scale(1)',
									fontSize:'40rpx'
						        }" @click="tabIndex1 = $event.index,refresh()">
						</u-tabs>
					</div>

					<view class="transaction-list">
						<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
							<view class="mt-24" v-for="(item,index) in list" :key="item.id">
								<view class="flex items-center justify-between">
									<view class="">
										{{item.createUserTemp.nickName}}—{{tabIndex1 == 0 ? '出售' : '求购'}}{{item.needShangdouNum}}元熵豆
									</view>
									<view class="" style="color: #FF561D;">
										{{tabIndex1 == 0 ? '出售' : '求购'}}单价:{{item.todayPrice}}
									</view>
								</view>

								<view class="mt-28 flex items-center">
									<input type="number" class="input px-28" placeholder="输入购买金额(元)"
										v-model="item.sellValue" />
									<view class="self ml-24 text-32 text-FFF font-500 text-center"
										@click="handleSell(item)">
										{{tabIndex1 == 0 ? '买入' : '卖出'}}
									</view>
								</view>
							</view>
						</s-pull-scroll>
					</view>
				</view>
			</view>





			<view class="" style="height: 100rpx;">

			</view>
		</view>

		<u-popup :show="soldShow" bgColor="transparent" mode="center" @close="soldShow = false"
			:safe-area-inset-bottom="false">
			<view class="soldWrap flex flex-col items-center">
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages4/icon_quxiao@2x.png" mode=""
					class="quxiao" @click="soldShow = false"></image>
				<u-tabs :list="tabList" :current="tabIndex" lineWidth="30" lineColor="#FE6835" :activeStyle="{
				            color: '#FE6835',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#606266',
				            transform: 'scale(1)'
				        }" @click="tabIndex = $event.index">
				</u-tabs>
				<view class="mt-32" style="color: #C4816B;">
					今日单价
				</view>
				<view class="text-44 font-700 mt-8" style="color: #FE6835;">
					￥{{todayPrice}}
				</view>
				<view class="soldContent mt-48 py-48 flex flex-col justify-between items-center">
					<input type="number" class="input text-center" placeholder="请输入价格" placeholder-style="color:#997983"
						v-model="soldValue" @input="soldValueChange" />

					<view class="input text-center" style="color: #997983;">
						{{soldContent}}{{soldContent == '预计' ? `${tabIndex == 0 ? '支付熵豆' : '获得熵豆'}` : ''}}
					</view>
				</view>

				<view class="soldConfirm text-FFF text-center text-32" @click="handleRelease">
					立即发布
				</view>
			</view>
		</u-popup>

		<payWay :payShow="payShow" @payWayConfirm="payWayConfirm" @payClose="payShow = false" :yue="true"></payWay>

		<u-popup :show="pay_password" @close="pay_password = false,payPassword='' " mode="center" :round="20">
			<view class="p-48">
				<div class="text-40 text-center" v-if="payModal == 2">
					账户<span class="font-700">余额</span>支付
				</div>

				<view class="pay_title mt-48">
					<text>请输入支付密码</text>
				</view>
				<view class="flex justify-around mt-28">
					<u-code-input v-model="payPassword" :maxlength="6" dot :focus="true"></u-code-input>
				</view>

				<view class="mt-32 text-FFF round-12 text-center py-20" style="background-color: #E2382B;"
					@click="confirmOrder(),pay_password = false">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import payWay from "@/components/payWay.vue"
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		components: {
			payWay
		},
		data() {
			return {
				goldValue: null,


				soldShow: false,
				soldContent: "预计",
				soldValue: "",
				todayPrice: 0,
				payShow: false,
				list: [],
				pay_password: false,
				payPassword: "",
				sellId: null,
				sellValue: null,
				jindou: null,
				navBg: "transparent",
				tabList: [{
						name: "出售"
					},
					{
						name: "求购"
					}
				],
				tabIndex: 0,
				tabList1: [
					{
						name: "出售中"
					},
					{
						name: "求购中"
					}
				],
				tabIndex1: 1,
				buyForm: {
					id: null,
					payNum: null,
					payWay: null
				},
				payModal: 1, // 1 求购支付 2. 买入支付 3.卖出
				
				globalConfig:getApp().globalData.config,
				prodList:[]

			};
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.navBg = "#F5554D"
			} else {
				this.navBg = "transparent"
			}
		},
		onLoad() {
			this.$Api.index.getProductsList({
				pageNum: 1,
				pageSize: 2,
				columnType: 6
			}).then((res) => {
				this.prodList = res.rows
			})
		},
		onShow() {
			thro = this
			this.getData()
			this.refresh()
		},
		methods: {
			goShopDetal(item) {
				this.$tab.nav(`/pages/commodity/detail?id=${item.id}&storeId=${item.storeId}`)
			},
			async confirmOrder() {
				this.pay_password = false
				if (!this.payPassword || this.payPassword.length != 6) {
					this.$modal.msg('请输入支付密码!')
					return
				}

				if (this.payModal == 1) {
					const res = await this.$Api.property.shangdouPublish({
						payPrice: this.soldValue,
						payWay: 4,
						sign: this.tabIndex == 0 ? '2' : '1',
						payPassword: this.payPassword
					})
					this.$modal.msg('求购成功!')
					this.refresh()
				}


				if (this.payModal == 2) {
					this.buyForm.payPassword = this.payPassword
					const res = await this.$Api.property.shangdouReceive(this.buyForm)

					this.$modal.msg('买入成功!')
					this.refresh()
				}

				if (this.payModal == 3) {
					// #ifdef APP || H5
					let form = {
						id: this.sellId,
						payPrice: this.sellValue,
						payPassword: this.payPassword
					}
					// #endif

					// #ifdef MP-WEIXIN
					let form = {
						id: this.sellId,
						payPrice: this.sellValue,
						payPassword: this.payPassword,
						receiveType: 0
					}
					// #endif
					const res = await this.$Api.property.shangdouReceive(form)
					this.payPassword = ""
					this.getData()
					this.refresh()
				}
			},
			async handleSell(row) {
				if (!row.sellValue || row.sellValue == "" || row.sellValue <= 0) {
					this.$modal.msg('请输入大于等于1的数')
					return
				}

				if (row.sellValue > row.needShangdouNum) {
					this.$modal.msg('数量输入不正确!')
					return
				}

				if (this.tabIndex1 == 0) {
					this.buyForm = {
						id: row.id,
						payPrice: row.sellValue,
						payWay: 4,
					}
					this.payModal = 2

					// this.payPassword = ""
					// this.pay_password = true
					this.payShow = true
				} else {
					// #ifdef APP || H5
					if (!this.$store.getters.userInfo.zfbOpenId) {
						this.$modal.confirm('请先完成支付宝登录校验，方便卖出成功后转账到您的支付宝!').then(con => {
							if (con) {
								this.$tab.nav(`/pages/mine/setting/account`)
							}
						})
						return
					}
					// #endif

					// #ifdef MP-WEIXIN
					if (!this.$store.getters.userInfo.zfbOpenId) {
						this.$modal.msg('请先在app端绑定支付宝账户!')
						return
					}
					// #endif
					this.payModal = 3
					this.sellId = row.id
					this.sellValue = row.sellValue
					this.payShow = false
					this.pay_password = true
				}
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const curList = await this.$Api.property.shangdouMarketList({
						pageSize: 10,
						pageNum: pullScroll.page,
						sign: this.tabIndex1 == 0 ? '2' : '1'
					})

					this.list = this.list.concat(curList.rows || []);

					this.list.forEach(item => {
						item.sellValue = ""
					})

					if (curList.total == 0) {
						pullScroll.empty()
					}

					if (this.list.length >= curList.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			handleRelease: throttle(2000, () => {
				if (thro.soldValue <= 0 || !thro.isInteger(Number(thro.soldValue))) {
					thro.soldValue = null
					thro.$modal.msg('请输入大于等于1的整数!')
					return
				}
				thro.soldShow = false
				if (thro.tabIndex == 0) {
					thro.$Api.property.shangdouPublish({
						payPrice: thro.soldValue,
						sign: thro.tabIndex == 0 ? '2' : '1'
					}).then(() => {
						thro.refresh()
					})
				} else {
					thro.payModal = 1
					thro.payShow = true
					// thro.payPassword = ""
					// thro.pay_password = true
				}
			}, {
				noTrailing: true
			}),
			handleBuy() {
				this.soldContent = "预计"
				this.soldValue = ""
				this.soldShow = true
			},
			async payWayConfirm(e) {
				this.payShow = false
				if (this.payModal == 1) {
					if (e == 4) {
						this.payPassword = ""
						this.pay_password = true
					} else {
						const res = await this.$Api.property.shangdouPublish({
							payPrice: this.soldValue,
							payWay: e,
							sign: this.tabIndex == 0 ? '2' : '1'
						})

						if (e == 2 || e == 0) {
							const wxPay = await this.$pay.WeChatPay(res)
						} else {
							const alyPay = await this.$pay.Alipay(res.data)
						}
						this.refresh()
					}
				}

				if (this.payModal == 2) {
					if (e == 4) {
						this.payPassword = ""
						this.pay_password = true
					} else {
						this.buyForm.payWay = e
						const res = await this.$Api.property.shangdouReceive(this.buyForm)
						if (e == 2 || e == 0) {
							const wxPay = await this.$pay.WeChatPay(res)
						} else {
							const alyPay = await this.$pay.Alipay(res.data)
						}
						this.$modal.msg('买入成功!')
						setTimeout(() => {
							this.$tab.nav(`/pages/mine/currency/index`)
						}, 1500)
					}
				}
			},
			async getData() {
				const res = await this.$Api.property.shangdouNowPrice()
				console.log(res)
				this.todayPrice = res

				const userRichInfo = await this.$Api.user.userRichInfo()
				userRichInfo.data.forEach(item => {
					switch (item.moneyId) {
						case 14:
							this.goldValue = item.amount
							break
					}
				})
			},
			isInteger(obj) {
				return typeof obj === 'number' && obj % 1 === 0
			},
			async soldValueChange() {
				if (this.soldValue <= 0) {
					this.soldValue = null
					this.$modal.msg('请输入大于等于1的数!')
					return
				}
				if (this.soldValue == "" || !this.soldValue) {
					this.soldContent = "预计"
					return
				}
				const res = await this.$Api.property.countShangdou({
					price: this.soldValue,
				})
				this.soldContent = res
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
	}
	
	/deep/ .uni-nav-bar-text{
		font-size: 36rpx !important;
	}
	
	.shangdouduihuan{
		height: 522rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages5/shangdouduihuanqu1@2x.png) no-repeat;
		background-size: 100% 100%;
		padding: 126rpx 24rpx 0 24rpx;
	}

	.property-bg {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	/* #ifndef MP-WEIXIN */
	.wxjb {
		justify-content: space-between;
	}

	/* #endif */

	.index-nav {
		width: 100%;
		padding: 0rpx 32rpx 0 32rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;

		.index-title {
			height: 40rpx;
		}

		.index-xiaoxi {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.content {
		position: relative;
		z-index: 2;
		width: 100%;

		.nav-top {
			width: 100%;
			height: 144rpx;
			background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages5/wod_shang_bg@2x.png) no-repeat;
			background-size: 100% 100%;

			.nav-line {
				width: 2rpx;
				height: 48rpx;
				background: #E4AC5C;
			}

			.toufang {
				width: 200rpx;
				height: 68rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #D0800D;
				line-height: 68rpx;
			}
		}

		.jindou {
			.charts-box {
				width: 100%;
				height: 314rpx;
				background: #F6F6F6;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
		}

		.transaction {
			height: 876rpx;
			background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages5/jiaoimg_jiaoyidating@2x.png') no-repeat;
			background-size: 100% 100%;

			.transaction-list {
				margin-top: 32rpx;

				.input {
					width: 454rpx;
					height: 72rpx;
					background: #F0F0F0;
					border-radius: 356rpx 356rpx 356rpx 356rpx;
					line-height: 72rpx;
				}

				.self {
					width: 172rpx;
					height: 72rpx;
					background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
					border-radius: 356rpx 356rpx 356rpx 356rpx;
					line-height: 72rpx;
				}
			}
		}

		.footer {
			height: 314rpx;
			background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/pro-b-bg@2x.png') no-repeat;
			background-size: 100% 100%;
		}
	}

	.soldWrap {
		width: 686rpx;
		height: 1088rpx;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages5/img_fabuqiugou.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: -100rpx;
		padding: 368rpx 0 48rpx 0;

		.quxiao {
			position: absolute;
			top: 268rpx;
			right: 32rpx;
			width: 64rpx;
			height: 64rpx;
		}

		.soldContent {
			width: 622rpx;
			height: 304rpx;
			background: #FCF4F7;
			border-radius: 28rpx 28rpx 28rpx 28rpx;

			.input {
				width: 536rpx;
				height: 88rpx;
				background: #F4DEE5;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				line-height: 88rpx;

			}
		}

		.soldConfirm {
			width: 322rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #FF561D 33%, #FF0064 100%);
			border-radius: 356rpx 356rpx 356rpx 356rpx;
			line-height: 88rpx;
			margin-top: 32rpx;
		}
	}
</style>